<template>
    <div class="app-container">
        <div class="search-container">
            <el-form ref="queryParamsRef" :inline="true" :model="queryParams" label-width="100px">
                <el-form-item label="是否急诊" prop="isEmergency">
                    <el-radio-group v-model="queryParams.isEmergency" @change="handleQuery">
                        <el-radio value="">全部</el-radio>
                        <el-radio v-for="dict in dictDataMap['sys_yes_no']" :key="dict.dictValue"
                                  :value="dict.dictValue">{{ dict.dictLabel }}
                        </el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="就诊日期" prop="visitDate">
                    <el-date-picker v-model="queryParams.visitDate" class="width-120"
                                    clearable
                                    placeholder="请选择就诊日期"
                                    type="date"
                                    value-format="YYYY-MM-DD"
                                    @change="handleQuery">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="门诊号" prop="clinicNo">
                    <el-input
                        v-model="queryParams.clinicNo"
                        clearable
                        placeholder="请输入门诊号"
                        @keyup.enter="handleQuery"
                    />
                </el-form-item>
                <el-form-item label="姓名" prop="name">
                    <el-input
                        v-model="queryParams.name"
                        clearable
                        placeholder="请输入姓名"
                        @keyup.enter="handleQuery"
                    />
                </el-form-item>
                <el-form-item label="身份证号" prop="idNo">
                    <el-input
                        v-model="queryParams.idNo"
                        clearable
                        placeholder="请输入身份证号"
                        @keyup.enter="handleQuery"
                    />
                </el-form-item>
                <el-form-item label="费别" prop="chargeType">
                    <el-select v-model="queryParams.chargeType" class="width-120" clearable
                               placeholder="请选择费别" @change="handleQuery">
                        <el-option
                            v-for="dict in dictDataMap['medical_insurance_type']"
                            :key="dict.dictValue"
                            :label="dict.dictLabel"
                            :value="dict.dictValue"
                        />
                    </el-select>
                </el-form-item>
                <!--                <el-form-item label="医保类别" prop="insuranceType">-->
                <!--                    <el-select v-model="queryParams.insuranceType" placeholder="请选择医保类别" class="width-120">-->
                <!--                        <el-option v-for="dict in dictDataMap['medical_insurance_type']" :key="dict.dictValue"-->
                <!--                                   :label="dict.dictLabel" :value="dict.dictValue"></el-option>-->
                <!--                    </el-select>-->
                <!--                </el-form-item>-->
                <el-form-item label="患者医保来源" prop="source">
                    <el-select v-model="queryParams.source" class="width-120"
                               clearable placeholder="请选择患者医保来源"
                               @change="handleQuery">
                        <el-option
                            v-for="dict in dictDataMap['patient_medical_source']"
                            :key="dict.dictValue"
                            :label="dict.dictLabel"
                            :value="dict.dictValue"
                        />
                    </el-select>
                </el-form-item>
                <el-form-item label="接诊科室" prop="deptId">
                    <base-dept-tree ref="baseDeptTreeRef" :clinicalSignStr="'5,6,9,10'" :org-id="userInfo.orgId"
                                    :value="queryParams.deptId"
                                    style="width: 177px;" @deptSelect="deptSelect"/>
                </el-form-item>
                <el-form-item label="接诊医生" prop="doctorId">
                    <user-select :id="queryParams.doctorId" ref="userSelectRef" :org-id="userInfo.orgId"
                                 class="width-120" @userChange="userChange"/>
                </el-form-item>
                <!--                <el-form-item label="挂号状态" prop="clinicType">-->
                <!--                    <el-select v-model="queryParams.clinicType" placeholder="请选择挂号状态" clearable>-->
                <!--                        <el-option-->
                <!--                            v-for="dict in dictDataMap['${dictType}']"-->
                <!--                            :key="dict.dictValue"-->
                <!--                            :label="dict.dictLabel"-->
                <!--                            :value="dict.dictValue"-->
                <!--                        />-->
                <!--                    </el-select>-->
                <!--                </el-form-item>-->
                <el-form-item label="退号操作员" prop="registOperator">
                    <el-input
                        v-model="queryParams.registOperator"
                        clearable
                        placeholder="请输入退号操作员"
                        @keyup.enter="handleQuery"
                    />
                </el-form-item>
                <el-form-item label="退号结账" prop="registNo">
                    <el-input
                        v-model="queryParams.registNo"
                        clearable
                        placeholder="请输入退号结账"
                        @keyup.enter="handleQuery"
                    />
                </el-form-item>
                <el-form-item>
                    <query-form-button @handleQuery="handleQuery" @resetQuery="resetQuery"/>
                </el-form-item>
            </el-form>
        </div>
        <el-table v-adaptive :border="true" :data="clinicMasterList" :header-cell-style="$headerCellStyle"
                  :stripe="true" highlight-current-row>
            <el-table-column :align="'center'" label="是否急诊" prop="isEmergency" width="80">
                <template #default="scope">
                    <dict-data-tag :options="dictDataMap['sys_yes_no']" :value="scope.row.isEmergency"/>
                </template>
            </el-table-column>
            <el-table-column :align="'center'" label="挂号时间" prop="createTime" width="100">
                <template #default="scope">
                    <span>{{ $parseTime(scope.row.createTime, '{y}-{m}-{d}') }}</span>
                </template>
            </el-table-column>
            <el-table-column :align="'center'" label="就诊日期" prop="visitDate" width="100">
                <template #default="scope">
                    <span>{{ $parseTime(scope.row.visitDate, '{y}-{m}-{d}') }}</span>
                </template>
            </el-table-column>
            <el-table-column :align="'center'" label="门诊号" prop="clinicNo" width="120"/>
            <el-table-column :align="'center'" :show-overflow-tooltip="true" label="姓名" prop="name" width="100"/>
            <el-table-column :align="'center'" label="出生日期" prop="birthdayDate" width="100">
                <template #default="scope">
                    <span>{{ $parseTime(scope.row.birthdayDate, '{y}-{m}-{d}') }}</span>
                </template>
            </el-table-column>
            <el-table-column :align="'center'" label="联系电话" prop="phone" width="100"/>
            <el-table-column :align="'center'" :show-overflow-tooltip="true" label="住址" prop="address" width="130"/>
            <el-table-column :align="'center'" label="身份证号" prop="idNo" width="140"/>
            <el-table-column :align="'center'" label="费别" prop="chargeType" width="80">
                <template #default="scope">
                    <dict-data-tag :options="dictDataMap['medical_insurance_type']" :value="scope.row.chargeType"/>
                </template>
            </el-table-column>
            <!--            <el-table-column label="医保类别" :align="'center'" prop="insuranceType">-->
            <!--                <template #default="scope">-->
            <!--                    <dict-data-tag :options="dictDataMap['medical_insurance_type']" :value="scope.row.chargeType"/>-->
            <!--                </template>-->
            <!--            </el-table-column>-->
            <el-table-column :align="'center'" label="患者医保来源" prop="source">
                <template #default="scope">
                    <dict-data-tag :options="dictDataMap['patient_medical_source']" :value="scope.row.source"/>
                </template>
            </el-table-column>
            <el-table-column :align="'center'" label="接诊科室" prop="deptName"/>
            <el-table-column :align="'center'" label="接诊医生" prop="doctorName"/>
            <el-table-column :align="'center'" label="挂号状态" prop="clinicType" width="100">
                <template #default="scope">
                    <dict-data-tag :options="dictDataMap['clinic_type']" :value="scope.row.clinicType"/>
                </template>
            </el-table-column>
            <el-table-column :align="'center'" label="实收费用" prop="clinicChage">
                <template #default="scope">
                    <span class="ys-css">{{ parseFloat(scope.row.clinicChage).toFixed(2) }}</span>元
                </template>
            </el-table-column>
            <el-table-column :align="'center'" label="费用明细" prop="moneyType" width="65">
                <template #default="scope">
                    <el-popover :title="scope.row.name + ' | 门诊号:' + scope.row.clinicNo" :width="270"
                                placement="left"
                                trigger="hover">
                        <template #reference>
                            <el-button type="primary">详情</el-button>
                        </template>
                        <el-descriptions :border="true" :column="1" class="mt5 mr5 mb5 ml5">
                            <el-descriptions-item v-for="(item, index) in scope.row.registrationItemVos"
                                                  :key="index"
                                                  min-width="80px">
                                <template #label>
                                    <div style="display: flex">
                                        <div style="flex: 1">
                                            <span style="font-weight: bold">{{ item.itemName }} </span>
                                        </div>
                                    </div>
                                </template>
                                <span :class="item.costs >= 0 ? 'ys-css' : 'ret-ys-css'">{{ parseFloat(item.costs).toFixed(2) }} </span>元
                            </el-descriptions-item>
                        </el-descriptions>
                    </el-popover>
                </template>
            </el-table-column>
            <el-table-column :align="'center'" label="支付方式" prop="moneyType" width="65">
                <template #default="scope">
                    <el-popover :title="scope.row.name + ' | 门诊号:' + scope.row.clinicNo" :width="270"
                                placement="right"
                                trigger="hover">
                        <template #reference>
                            <el-button type="primary">详情</el-button>
                        </template>
                        <el-descriptions :border="true" :column="1" class="mt5 mr5 mb5 ml5">
                            <el-descriptions-item v-for="(item, index) in scope.row.registerPayTypeVos"
                                                  :key="index"
                                                  min-width="80px">
                                <template #label>
                                    <div style="display: flex">
                                        <div style="flex: 1">
                                            <span style="font-weight: bold">{{ item.typeName }} </span>
                                        </div>
                                    </div>
                                </template>
                                <span :class="item.costs >= 0 ? 'ys-css' : 'ret-ys-css'">{{ parseFloat(item.costs).toFixed(2) }} </span>元
                            </el-descriptions-item>
                        </el-descriptions>
                    </el-popover>
                </template>
            </el-table-column>
            <el-table-column :align="'center'" label="退号日期" prop="refundRegistDate" width="180">
                <template #default="scope">
                    <span>{{ $parseTime(scope.row.refundRegistTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
                </template>
            </el-table-column>
            <el-table-column :align="'center'" label="退号操作员" prop="refundRegistOperatorName"/>
            <el-table-column :align="'center'" class-name="small-padding fixed-width" label="操作" width="100">
                <template #default="scope">
                    <el-tooltip :placement="'left'" class="item" content="退费" effect="dark">
                        <el-button v-if="scope.row.clinicType != '2' && !scope.row.refundRegistOperator" circle
                                   type="danger"
                                   @click="refundApplicationFun(scope.row)">
                            <svg-icon icon-class="refundApplication"/>
                        </el-button>
                    </el-tooltip>
                </template>
            </el-table-column>
        </el-table>
        <pagination
            v-show="total>0"
            v-model:limit="queryParams.pageSize"
            v-model:page="queryParams.pageNum"
            :total="total"
            @pagination="getList"
        />

        <!-- 添加或修改门诊就诊记录对话框 -->
        <el-dialog v-model="open" :close-on-click-modal="false" :title="title" append-to-body width="500px">
            <template #footer>
                <span class="dialog-footer">
                  <el-button type="primary" @click="submitForm">确 定</el-button>
                  <el-button @click="cancel">取 消</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>
<script lang="ts">
export default {
    name: "ClinicMaster"
}
</script>

<script lang="ts" setup>
import {
    addClinicMaster,
    delClinicMaster,
    getClinicMaster,
    listClinicMaster,
    updateClinicMaster,
    clinicRefundApplication,
    selectPageClinicMaster
} from "@/api/patient/clinicMaster.ts";
import {useUserStoreHook} from "@/store/modules/user.ts";
import {useDictStoreHook} from "@/store/modules/dict";


const useUserStore = useUserStoreHook();
const dictStore = useDictStoreHook();
// 登录用户信息
const userInfo = <UserInfoBusi>useUserStore.user.userInfo
let dictDataMap = ref(dictStore.isTypeGetData('register_type', 'payment_method', 'patient_medical_source', 'sys_yes_no',
    'medical_insurance_type', 'clinic_type'))
const {proxy} = getCurrentInstance() as any;

const formRef = ref();
const queryParamsRef = ref()
const clinicMasterList = ref([]);
const open = ref(false);
const total = ref(0);
const title = ref("");

const queryParams = ref<any>({
    pageNum: 1,
    pageSize: 10,
    orgId: userInfo.orgId,
    visitDate: "",
    clinicNo: "",
    name: "",
    idNo: "",
    insuranceNo: "",
    deptId: "",
    doctorId: "",
    clinicType: "",
    acctNo: "",
    isEmergency: ""
})

/** 查询门诊就诊记录列表 */
function getList() {
    selectPageClinicMaster(queryParams.value).then((response: any) => {
        clinicMasterList.value = response.rows;
        total.value = response.total;
    });
}

// 取消按钮
function cancel() {
    open.value = false;
}

/** 搜索按钮操作 */
function handleQuery() {
    queryParams.value.pageNum = 1;
    getList();
}

/** 重置按钮操作 */
function resetQuery() {
    queryParamsRef.value.resetFields()
    // proxy.resetForm("queryRef");
    handleQuery();
}

/** 科室点击事件 */
function deptSelect(node) {
    if (!node) {
        queryParams.value.deptId = "";
    } else {
        queryParams.value.deptId = node.deptId;
    }
    getList();
}


/** 用户点击事件 */
function userChange(obj) {
    if (!obj) {
        queryParams.value.doctorId = "";
    } else {
        queryParams.value.doctorId = obj.userId;
    }
    getList();
}

/**
 * 退费操作
 */
function refundApplicationFun(row: any) {
    ElMessageBox.confirm("是否确认退号",
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    ).then(() => {
        clinicRefundApplication(row.id).then(() => {
            ElMessage.success("退号成功")
            getList()
        })
    })
}

getList();

defineExpose({
    getList,
    handleQuery
})
</script>
